<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- Head 开始 -->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 告诉浏览器对屏幕宽度做出响应 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>用户</title>
  <!-- 主要样式表开始 -->
  <link href="/assets/css/main.css" rel="stylesheet">
  <link href="/css/viewOrder.css" rel="stylesheet">
  <!-- favicon图标 -->
  <link type="image/png" rel="shortcut icon" href="/assets/images/favicon.png">
  <style>
    /* 通用样式 */
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    #Content {
      background: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      max-width: 400px;
      width: 100%;
      text-align: center;
    }

    h2 {
      margin-bottom: 20px;
      color: #333;
      font-size: 24px;
    }

    /* 表单组样式 */
    .form-group {
      margin-bottom: 20px;
      text-align: left;
    }

    label {
      display: block;
      margin-bottom: 5px;
      color: #555;
      font-weight: bold;
    }

    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
      box-sizing: border-box;
      transition: border-color 0.3s ease;
    }

    input[type="text"]:focus,
    input[type="password"]:focus {
      border-color: #005e21;
      outline: none;
    }

    /* 按钮样式 */
    button {
      width: 100%;
      padding: 12px;
      background: linear-gradient(45deg, #005e21, #005e21);
      border: none;
      border-radius: 5px;
      color: white;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    button:hover {
      background: linear-gradient(45deg, #005e21, #005e21);
    }

    /* 注册链接样式 */
    p {
      margin-top: 15px;
      color: #555;
    }

    a {
      color: #005e21;
      text-decoration: none;
      font-weight: bold;
      transition: color 0.3s ease;
    }

    a:hover {
      color: #fff;
    }
  </style>
</head>
<!-- Head 结束 -->

<body>
<!-- 预加载部分开始 -->
<div id="preloader">
  <div id="status"></div>
</div>
<!-- 预加载部分结束 -->
<div class="boxed-layout">
  <!-- 页眉部分开始 -->
  <header class="top-header theme-bg">
    <div class="container">
      <div class="row">
        <div class="col-lg-5">
          <div class="jama-logo">
            <a href="#" class=""><img src="/assets/images/logo-topbar.gif" class="img-responsive"
                                      alt=""></a>
          </div>
        </div>
        <div class="col-lg-7 align-self-center">
          <div class="jama-info d-inline-flex">
            <ul>
              <li class="border-right"><i class="fa fa-phone me-1"></i> 15348361234</li>
              <li><i class="fa fa-envelope me-1"></i>1192878959@qq.com</li>
            </ul>
          </div>
          <div class="jama-social d-inline-flex">
            <ul>
              <li><a href="#" class="border-round"><i class="fa-brands fa-facebook"></i></a></li>
              <li><a href="#" class="border-round"><i class="fa-brands fa-x-twitter"></i></a></li>
              <li><a href="#" class="border-round"><i class="fa-brands fa-instagram"></i></a></li>
              <li><a href="#" class="border-round"><i class="fa-brands fa-linkedin-in"></i></a></li>
            </ul>
            <ul style="color: #fff;">
              <li th:if="${session.username!=null}">
                已登陆
                <a href="/logout">退出</a>
              </li>
              <li th:if="${session.username==null}">
                <a href="/">登录</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- /#header 部分结束 -->

  <!-- 导航部分 -->
  <div class="navigation">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <nav class="navbar navbar-expand-md navbar-dark">
            <div class="navbar-header">
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                      data-bs-target="#collapsibleNavbar">
                <span class="fa fa-navicon"></span>
              </button>
            </div>
            <div class="justify-content-center collapse navbar-collapse" id="collapsibleNavbar">
              <ul class="navbar-nav">
                <li class="nav-item dropdown"><a class="nav-link dropdown-toggle active"
                                                 id="navbarDropdown2" role="button"
                                                 data-bs-toggle="dropdown" aria-haspopup="true"
                                                 aria-expanded="false">下拉框（可附链接）</a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
                    <a class="dropdown-item">下拉框元素1</a>
                    <a class="dropdown-item">下拉框元素2</a>
                  </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="/main/view">首页</a></li>
                <li class="nav-item"><a class="nav-link" href="/cart/view">商品</a></li>
                <li class="nav-item"><a class="nav-link" href="/account/view">用户</a></li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <!-- /#导航部分结束 -->

  <!--主体开始-->
  <div>
    <div style="height:500px;overflow-y: auto;padding: 20px">
      <h2><b>添加用户</b></h2>
      <form id="loginForm" action="/account/add" method="post">
        <div class="form-group">
          <label for="userid">Uerid:</label>
          <input type="text" id="uesrid" name="userid" required>
        </div>

        <!-- Email -->
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="text" id="email" name="email" required>
        </div>

        <!-- First Name -->
        <div class="form-group">
          <label for="firstname">First Name:</label>
          <input type="text" id="firstname" name="firstname" required>
        </div>

        <!-- Last Name -->
        <div class="form-group">
          <label for="lastname">Last Name:</label>
          <input type="text" id="lastname" name="lastname" required>
        </div>

        <!-- Status -->
        <div class="form-group">
          <label for="status">Status:</label>
          <input type="text" name="status" required>
        </div>

        <!-- Address 1 -->
        <div class="form-group">
          <label for="addr1">Address 1:</label>
          <input type="text" id="addr1" name="addr1" required>
        </div>

        <!-- Address 2 -->
        <div class="form-group">
          <label for="addr2">Address 2:</label>
          <input type="text" id="addr2" name="addr2">
        </div>

        <!-- City -->
        <div class="form-group">
          <label for="city">City:</label>
          <input type="text" id="city" name="city" required>
        </div>

        <!-- State -->
        <div class="form-group">
          <label for="state">State:</label>
          <input type="text" id="state" name="state" required>
        </div>

        <!-- Zip -->
        <div class="form-group">
          <label for="zip">Zip:</label>
          <input type="text" id="zip" name="zip" required>
        </div>

        <!-- Country -->
        <div class="form-group">
          <label for="country">Country:</label>
          <input type="text" id="country" name="country" required>
        </div>

        <!-- Phone -->
        <div class="form-group">
          <label for="phone">Phone:</label>
          <input type="text" id="phone" name="phone" required>
        </div>

        <!-- Favorite Category -->
        <div class="form-group">
          <label for="favcategory">Favorite Category:</label>
          <input type="text" id="favcategory" name="favcategory" required>
        </div>

        <!-- Submit Button -->
        <div class="form-group">
          <button type="submit">添加</button>
        </div>
      </form>
    </div>
    <div id="Separator">&nbsp;</div>
  </div>
  <!--主体结束-->
</div>

<!-- jQuery (Bootstrap的JavaScript插件必需) -->
<script src="/assets/js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap js文件 -->
<script src="/assets/js/bootstrap.bundle.min.js"></script>
<!-- swiper文件 -->
<script src="/assets/js/swiper.min.js"></script>
<!-- 作品展示js文件 -->
<script src="/assets/js/jquery.mixitup.min.js"></script>
<!-- 站点主js文件 -->
<script src="/assets/js/main.js"></script>

</body>

</html>
